<template>
    <div>
        <!------------------------------------------------------------------第四步,注册成功-->
        <div class="steps stepsFour">
            <div class="FourDiv">
                <div class="FourOne right FourDivDiv">恭喜注册成功，你的账户为：</div>
                <p class="FourTwo right FourDivDiv"><span>登录名：</span><span style="color: #EF3015;">{{data.name}}</span></p>
                <p class="FourThree right FourDivDiv">银行卡：{{data.bank}}（尾号{{data.bankNum}}）已开通快捷支付</p>
                <p class="FourFour right FourDivDiv">会员名：{{data.YCname}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RegisterFour",
        data(){
            return{
                data:{
                    "name": '无',
                    "bank": '浦发银行',
                    "bankNum": "42123",
                    "YCname": "235"
                }
            }
        },
        methods:{

        },
        mounted(){
            //在页面刷新时步骤index保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("RegisterIndex",4);
            });
        }
    }
</script>

<style scoped>
    /***************************************************************中心Four步骤四*/
    .FourDiv{
        width:1200px;
        height:200px;
        background:rgba(243,253,246,1);
        border:1px solid rgba(222,243,230,1);
    }
    .FourDivDiv{
        width: 56%;
    }
    .FourOne{
        height: 90px;
        line-height:90px;
        font-size:20px;
        font-weight:600;
        color:rgba(51,51,51,1);
    }
    .FourTwo,.FourThree,.FourFour {
        height:22px;
        line-height:22px;
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .FourThree{

    }
    .FourFour{

    }

    /*浮动*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }

    .colorRed{
        color: red;
    }
    .colorGreen{
        color: green;
    }
</style>
